<template>
  <view>
    <view class="panel-box" v-if="showData.type === 'brand'">
      <image :src="showData.imageUrl" mode="widthFix"></image>
      <view class="info-box">
        <view class="brand-logo">
          <image :src="showData.logoUrl" mode="widthFix"></image>
        </view>
        <view class="content-text">
          <view class="title">{{ showData.title }}</view>
          <view class="des">{{ showData.productDes }}</view>
        </view>
      </view>
    </view>
    <panel002
      v-if="showData.type === 'commodity'"
      :showData="showData"
    ></panel002>
  </view>
</template>

<script>
import { defineComponent, reactive, toRefs } from "vue";
import panel002 from "./panel002.vue";
export default defineComponent({
  name: "panel005",
  props: {
    showData: {
      type: Object,
      default: () => {
        return {
          id: 1,
          title: "Nike 耐克",
          productDes: "1093万+人关注",
          imageUrl: "/static/dataImage/dewu/009.jpg",
          logoUrl: "/static/dataImage/dewu/logo001.webp",
          type: "brand",
        };
      },
    },
  },

  components: { panel002 },
  setup(props) {
    const data = reactive({});
    return {
      ...toRefs(data),
    };
  },
});
</script>

<style scoped lang="less">
.panel-box {
  background: #fff;
  overflow: hidden;
  font-weight: 400;
  image {
    width: 100%;
    display: block;
    border-radius: 10rpx;
  }
  .info-box {
    display: flex;
    // 渐变背景
    background: linear-gradient(to top, #f4f4f4, #fff);
    .brand-logo {
      width: 60rpx;
      height: 60rpx;
      border-radius: 40rpx;
      overflow: hidden;
      margin: 10rpx 20rpx auto 30rpx;

      image {
        width: 100%;
        display: block;
      }
    }
    .content-text {
      .title {
        font-size: 30rpx;
      }
      .des {
        line-height: 62rpx;
        font-size: 24rpx;
        font-weight: 300;
        color: #666;
      }
    }
  }
}
</style>
